<template>
<section>
    <d2-container type="full">
        <section class="data-list-box">

            <div class="table-operate">
                <table-field-filter :fields="fields" @showChange="updataKey +=1" />

                <mk-table-button dis-delete :dis-add="!permBtn.createButton" @add="goEdit" :disDelete="!permBtn.deleteButton" @delete="deleteBatch">
                    <el-button size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
                </mk-table-button>
            </div>
            <mk-el-table @sort="sortChange" :datas="datas" :key="updataKey"  :height="tableHeight" @select="tableSelect" @select-all="tableSelectAll" :loadingText="loading.text" :loading="loading.list">
                <template v-for="field in fields" v-if="field.show">
                    <el-table-column v-if="field.key=='checkBox'" :align="field.align" type="selection" :selectable="selectable"></el-table-column>
                    <el-table-column v-else-if="field.key=='show'" :align="field.align" :sortable="field.enableSort?'custom':false" :label="field.name" :width="field.width" :fixed="field.fixed">
                        <template slot-scope="scope">
                            <el-tag v-if="!scope.row.show" type="info">否</el-tag>
                            <el-tag v-else type="success">是</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-else-if="field.key=='toolButton'" :align="field.align" :label="field.name" :width="field.width" :fixed="field.fixed">
                        <template slot-scope="scope">
                            <mk-tool-button @view="goView(scope.row)" :dis-delete="!permBtn.deleteButton" :dis-edit="!permBtn.updateButton" @edit="goEdit(scope.row)" @delete="goDelete(scope.row)">
                            </mk-tool-button>
                        </template>
                    </el-table-column>

                    <el-table-column v-else show-overflow-tooltip :prop="field.key" :align="field.align" :label="field.name" :width="field.width" :sortable="field.enableSort?'custom':false" :fixed="field.fixed" :header-align="field.headerAlign"></el-table-column>
                </template>

            </mk-el-table>
            <mk-pagination :current-page="query.offset" :page-size="query.limit" :data-size="temp.dataSize" @go="goPage" @changePageSize="changePageSize" />
        </section>
        <el-dialog
            title="新增/修改技能"
            :visible.sync="show.edit"
            width="50%">
            <getSkillInfo v-if="show.edit" :update-data="updateData" @close="close"/>
        </el-dialog>
        <el-dialog
            title="查看技能"
            :visible.sync="show.view"
            width="50%">
            <viewSkillInfo v-if="show.view" :view-data="viewData" @close="close"/>
        </el-dialog>
       
    </d2-container>

</section>
</template>

<script>
import Tools from "@/libs/utils.tool";

import {
    getSkillList,
    skillDelete
} from "@/api/modules/sys.personal.skill.api";

import util from "@/libs/util";
import getSkillInfo from "./modules/getSkillInfo.vue";
import viewSkillInfo from "./modules/viewSkillInfo.vue";
export default {
    name: 'skill',
    components: {
        getSkillInfo,
        viewSkillInfo
    },
    data() {
        return {
            show: {
                edit: false,
                view: false
            },
            updateData: {},
            viewData:{},
            type: '',
            updataKey: 0,
            heightL: 580,
            tableHeight: 580,
            //查询条件
            query: {
                params: {},
                limit: 15, //每页显示条数
                offset: 1, //页码
                sort: {
                    prop: 'index',
                    order: 'asc',
                }
            },
            permBtn: {
                createButton: false,
                queryButton: false,
                deleteButton: false,
                updateButton: false,

            },
            //返回数据列表
            selectData: [],
            datas: [],
            //临时变量
            temp: {
                //数据总调数
                dataSize: 0,
                //当前选中的id
                id: '',
                //
                item: []
            },
            //汇总数据
            totals: [],
            //加载中效果
            loading: {
                //获取列表数据中
                list: false,
                text: '加载中'
            },
            item_data: {},
            //列表渲染数据列
            fields: [{
                    key: 'checkBox',
                    name: '全选按钮',
                    show: true,
                    enableSort: false,
                    fixed: false
                },
                {
                    key: 'name',
                    name: '技能',
                    show: true,
                    align: "left",
                    enableSort: false,
                    fixed: false,
                    headerAlign: "center",
                },
                {
                    key: 'index',
                    name: '排序',
                    show: true,
                    align: "center",
                    enableSort: false,
                    fixed: false,
                    width: '60'
                },
                {
                    key: 'show',
                    name: '是否有效',
                    show: true,
                    align: "center",
                    enableSort: false,
                    fixed: false,
                    width: '100'
                },
                /*{
                  key: 'createdAt',
                  name: '创建时间',
                  show: true,
                  align: "center",
                  width: '',
                  enableSort: true,
                    fixed: false,
                  width: '160'
                },
                {
                  key: 'updatedAt',
                  name: '修改时间',
                  show: true,
                  align: "center",
                  width: '',
                  enableSort: true,
                    fixed: false,
                   width: '160'
                },*/
                {
                    key: 'toolButton',
                    name: '操作',
                    show: true,
                    align: "center",
                    width: '220',
                    enableSort: false,
                    fixed: 'right'
                },
            ]
        }
    },
    watch: {
        'heightL'(val) {
            this.updataKey += 1
            this.tableHeight = val
        },
    },
    mounted() {
        this.getWinHeight()
        this.getDataList();
        this.getPerms()
        this.selectData = []
    },
    methods: {
      selectable(row,index){
        if(row.show == 1){
          return true
        }else{
           return false
        }
      },
        getPerms() {
            // let perms = this.$store.state.d2admin.perms.permsArr
            let perms = JSON.parse(util.cookies.get('permMenus'))
            if (perms.includes('*')) {
                this.permBtn.createButton = true;
                this.permBtn.queryButton = true;
                this.permBtn.deleteButton = true;
                this.permBtn.updateButton = true;

            } else {
                if (perms.includes('POST /api/private/skill/create')) {
                    this.permBtn.createButton = true;
                }
                if (perms.includes('POST /api/private/skill/list')) {
                    this.permBtn.queryButton = true;
                }
                if (perms.includes('POST /api/private/skill/update')) {
                    this.permBtn.updateButton = true;
                }
                if (perms.includes('POST /api/private/skill/delete')) {
                    this.permBtn.deleteButton = true;
                }

            }
        },

        //获取窗口高度
        getWinHeight() {
            let that = this
            this.heightL = window.innerHeight - 320
            window.addEventListener('resize', () => {
                that.updataKey += 1
                that.heightL = window.innerHeight - 320
            })
        },
        tableSelectAll(e) {
            this.selectData = e
        },
        tableSelect(e) {
            this.selectData = e
        },
        deleteBatch() {
            if (this.selectData.length == 0) {
                this.$toast.warning('请选择需要删除的数据')
                return
            } else {
                this.$toast.confirm('批量删除所选技能, 是否继续?').then(() => {
                    skillDelete(this.selectData.map(v => {
                        return v.id
                    })).then(res => {
                        this.$toast.success('批量删除成功')
                        this.getDataList()
                    }).catch(err => {
                        console.log(err)
                    })
                });

            }
        },
        getDataList() {
            try {
                this.loading.list = true;
                getSkillList(this.query).then(res => {
                    let datas = res.data || []
                    for (const data of datas) {
                        //时间格式化
                        data.createdAt = data.createdAt && Tools.fmtLong2DateTime(data.createdAt)
                        data.updatedAt = data.updatedAt && Tools.fmtLong2DateTime(data.updatedAt)
                        data.showName = data.show == 1 ? '显示' : '隐藏'

                    }
                    this.datas = datas;
                    this.temp.dataSize = res.count;
                    this.loading.list = false;
                })
            } catch (err) {
                this.$message.error('数据加载失败')
                this.loading.list = false;
            }
        },
        goDelete(data) {
            this.$toast.confirm('此操作将永久删除该技能, 是否继续?').then(() => {
                skillDelete(data.id).then(res => {
                    this.$toast.success('删除成功')
                    this.getDataList()
                }).catch(err => {
                    console.log(err)
                })
            });

        },
        close() {
            this.show.edit = false
            this.show.view = false
            this.getDataList()
        },
        //跳到页
        goPage(pageNum) {
            this.query.offset = pageNum
            //查询数据
            this.getDataList();
        },
        //改变每页数据量
        changePageSize(size) {
            this.query.limit = size;
            this.query.offset = 1;
            this.getDataList();
        },
        //重置查询条件
        resetQuery(formName) {
            this.$refs[formName].resetFields();
            this.goPage(1);
        },
        //    排序
        sortChange(row) {
            this.query.sort.order = row.order === 'ascending' ? 'asc' : 'desc'
            this.query.sort.prop = row.prop
            this.getDataList()
        },
        //添加编辑
        goEdit(data) {
          
            this.updateData = data && data.id ? JSON.parse(JSON.stringify(data)) : {}
            this.show.edit = true
           
        },
        //跳转到查看详情
        goView(data) {
            this.viewData = data && data.id ? JSON.parse(JSON.stringify(data)) : {}
            this.show.view = true
            
        }
    }
}
</script>

<style scoped>

</style>
